<script lang="ts" setup>
import {defineEmits, ref, onUnmounted, onMounted} from 'vue'
import {DArrowRight} from '@element-plus/icons-vue';
import {vhToPx} from "@/utils/other";


const tagRef = ref<HTMLElement | null>(null);
let startY = 0;
let startTop = 0;

// 默认再屏幕中央
const tagTop = ref(vhToPx(50));

const drag = (e: MouseEvent) => {
  if (!tagRef.value) return;
  const diffY = e.clientY - startY;
  tagTop.value = startTop + diffY;

  // 确保标签不移出可视区域
  if (tagTop.value < 0) tagTop.value = 0;
  if (tagTop.value > window.innerHeight - tagRef.value.offsetHeight) {
    tagTop.value = window.innerHeight - tagRef.value.offsetHeight;
  }
};
 
const stopDrag = () => {
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', stopDrag);
};


const startDrag = (e: MouseEvent) => {
    if (!tagRef.value) return;
    startY = e.clientY;
    startTop = tagTop.value;
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDrag);
  };

const emit = defineEmits(["click"])

function handleClick() {
    emit("click")
}

onMounted(() => {
  window.addEventListener('resize', stopDrag);
});
 
onUnmounted(() => {
  window.removeEventListener('resize', stopDrag);
})
</script>

<template>

  <!-- 控制抽屉开关的小标签 -->
  <div 
  ref="tagRef"
  :style="{ top: tagTop + 'px' }"
  class="drawer-tag"
  @click="handleClick"
  @mousedown="startDrag"
>
  <el-icon><DArrowRight /></el-icon>
</div>
</template>


<style scoped>

 /* 小标签样式 */
 .drawer-tag {
   position: fixed;
   left: 0;
   transform: translateX(-50%);
   width: 40px;
   height: 40px;
   background-color: #409eff;
   cursor: pointer;
   border-radius: 0 4px 4px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 }
 
 /* 动画效果 */
 .slide-enter-active,
 .slide-leave-active {
   transition: transform 0.3s ease;
 }
 
 .slide-enter-from,
 .slide-leave-to {
   transform: translateX(-100%);
 }
</style>